<template>
	<view class="share-button-container">
		<view 
			class="share-button" 
			:class="[type, { 'disabled': disabled }]"
			@tap="handleShare"
		>
			<view class="button-content">
				<view class="share-icon">
					<text class="icon-text">{{ iconText }}</text>
				</view>
				<text class="share-text">{{ text }}</text>
			</view>
			<view class="share-effects" v-if="showEffects">
				<view class="effect-dot" v-for="(dot, index) in 3" :key="index"></view>
			</view>
		</view>
		
		<!-- 分享选项面板 -->
		<view class="share-panel" v-if="showPanel" @tap="hidePanel">
			<view class="panel-content" @tap.stop>
				<view class="panel-header">
					<text class="panel-title">分享到</text>
					<view class="close-btn" @tap="hidePanel">
						<text class="close-text">✕</text>
					</view>
				</view>
				
				<view class="share-options">
					<view class="share-option" @tap="shareToWeChat">
						<view class="option-icon wechat-icon">
							<text class="icon-text">💬</text>
						</view>
						<text class="option-text">微信好友</text>
					</view>
					
					<view class="share-option" @tap="shareToMoments">
						<view class="option-icon moments-icon">
							<text class="icon-text">🌟</text>
						</view>
						<text class="option-text">朋友圈</text>
					</view>
					
					<view class="share-option" @tap="copyToClipboard">
						<view class="option-icon copy-icon">
							<text class="icon-text">📋</text>
						</view>
						<text class="option-text">复制链接</text>
					</view>
					
					<view class="share-option" @tap="generatePoster">
						<view class="option-icon poster-icon">
							<text class="icon-text">🎨</text>
						</view>
						<text class="option-text">生成海报</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ShareButton',
	props: {
		text: {
			type: String,
			default: '分享'
		},
		type: {
			type: String,
			default: 'primary',
			validator: function (value) {
				return ['primary', 'secondary', 'outline'].indexOf(value) !== -1
			}
		},
		disabled: {
			type: Boolean,
			default: false
		},
		shareData: {
			type: Object,
			default: () => ({})
		},
		showEffects: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showPanel: false
		}
	},
	computed: {
		iconText() {
			switch (this.type) {
				case 'primary':
					return '📤'
				case 'secondary':
					return '🔗'
				case 'outline':
					return '📨'
				default:
					return '📤'
			}
		}
	},
	methods: {
		handleShare() {
			if (this.disabled) return
			
			this.showPanel = true
			this.$emit('share-click', this.shareData)
		},
		
		hidePanel() {
			this.showPanel = false
		},
		
		shareToWeChat() {
			this.hidePanel()
			this.$emit('share-wechat', this.shareData)
		},
		
		shareToMoments() {
			this.hidePanel()
			this.$emit('share-moments', this.shareData)
		},
		
		copyToClipboard() {
			this.hidePanel()
			this.$emit('copy-link', this.shareData)
		},
		
		generatePoster() {
			this.hidePanel()
			this.$emit('generate-poster', this.shareData)
		}
	}
}
</script>

<style lang="scss" scoped>
.share-button-container {
	position: relative;
}

.share-button {
	position: relative;
	overflow: hidden;
	border-radius: 32rpx;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
	backdrop-filter: blur(10rpx);
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}
	
	&:active:not(.disabled) {
		transform: scale(0.95) translateY(2rpx);
		box-shadow: 0 4rpx 16rpx rgba(106, 130, 251, 0.2);
	}
	
	&:hover:not(.disabled)::before {
		opacity: 1;
	}
	
	&.disabled {
		opacity: 0.6;
		cursor: not-allowed;
		filter: grayscale(0.3);
	}
	
	&.primary {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
		box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.3), 0 4rpx 16rpx rgba(118, 75, 162, 0.2);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		
		&:hover:not(.disabled) {
			box-shadow: 0 16rpx 40rpx rgba(102, 126, 234, 0.4), 0 8rpx 24rpx rgba(118, 75, 162, 0.3);
			transform: translateY(-4rpx);
		}
		
		.share-text {
			color: white;
			text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
		}
		
		.icon-text {
			filter: drop-shadow(0 1rpx 3rpx rgba(0, 0, 0, 0.2));
		}
	}
	
	&.secondary {
		background: rgba(255, 255, 255, 0.95);
		border: 2rpx solid transparent;
		background-clip: padding-box;
		box-shadow: 0 8rpx 24rpx rgba(106, 130, 251, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			top: -2rpx;
			left: -2rpx;
			right: -2rpx;
			bottom: -2rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 32rpx;
			z-index: -1;
		}
		
		&:hover:not(.disabled) {
			background: rgba(102, 126, 234, 0.05);
			box-shadow: 0 12rpx 32rpx rgba(106, 130, 251, 0.25), inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
			transform: translateY(-2rpx);
		}
		
		.share-text {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: 600;
		}
		
		.icon-text {
			filter: hue-rotate(220deg) saturate(1.2);
		}
	}
	
	&.outline {
		background: rgba(255, 255, 255, 0.1);
		border: 2rpx solid rgba(102, 126, 234, 0.3);
		backdrop-filter: blur(20rpx);
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		
		&:hover:not(.disabled) {
			border-color: #667eea;
			background: rgba(102, 126, 234, 0.08);
			box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.15);
		}
		
		.share-text {
			color: #333333;
			font-weight: 500;
		}
	}
}

.button-content {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24rpx 40rpx;
	position: relative;
	z-index: 1;
	
	.share-icon {
		margin-right: 16rpx;
		animation: iconPulse 2s infinite;
		
		.icon-text {
			font-size: 36rpx;
			filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
		}
	}
	
	.share-text {
		font-size: 30rpx;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: 1rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	}
}

.share-effects {
	position: absolute;
	top: 50%;
	right: 24rpx;
	transform: translateY(-50%);
	display: flex;
	gap: 6rpx;
	
	.effect-dot {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.6);
		animation: pulse 1.5s infinite;
		
		&:nth-child(2) {
			animation-delay: 0.2s;
		}
		
		&:nth-child(3) {
			animation-delay: 0.4s;
		}
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 0.3;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
}

@keyframes iconPulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

.share-panel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: flex-end;
	animation: fadeIn 0.3s ease;
}

.panel-content {
	width: 100%;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border-radius: 40rpx 40rpx 0 0;
	padding: 64rpx 40rpx 120rpx;
	animation: slideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 56rpx;
	position: relative;
	
	&::after {
		content: '';
		position: absolute;
		bottom: -24rpx;
		left: 0;
		right: 0;
		height: 2rpx;
		background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
	}
	
	.panel-title {
		font-size: 40rpx;
		font-weight: 700;
		color: #333333;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		letter-spacing: 1rpx;
	}
	
	.close-btn {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		cursor: pointer;
		
		&:hover {
			background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
			transform: rotate(90deg);
		}
		
		.close-text {
			font-size: 28rpx;
			color: #667eea;
			font-weight: 600;
		}
	}
}

.share-options {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40rpx;
	padding: 24rpx 0;
}

.share-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 28rpx;
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	
	&:hover::before {
		opacity: 1;
	}
	
	&:active {
		transform: scale(0.92) translateY(4rpx);
	}
	
	.option-icon {
		width: 104rpx;
		height: 104rpx;
		border-radius: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		
		&.wechat-icon {
			background: linear-gradient(135deg, #07C160 0%, #00D852 100%);
			box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
		}
		
		&.moments-icon {
			background: linear-gradient(135deg, #FFB800 0%, #FF8F00 100%);
			box-shadow: 0 8rpx 24rpx rgba(255, 184, 0, 0.3);
		}
		
		&.copy-icon {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
		}
		
		&.poster-icon {
			background: linear-gradient(135deg, #FF6B9D 0%, #C44569 100%);
			box-shadow: 0 8rpx 24rpx rgba(255, 107, 157, 0.3);
		}
		
		.icon-text {
			font-size: 52rpx;
			filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
		}
	}
	
	.option-text {
		font-size: 26rpx;
		color: #333333;
		text-align: center;
		font-weight: 500;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from { 
		transform: translateY(100%);
		opacity: 0;
	}
	to { 
		transform: translateY(0);
		opacity: 1;
	}
}
</style>